<template>
  <div>
    <div class="MoreBox">
        <!-- 页头 -->
        <div class="back">
          <!-- <span class="iconfont icon-xiangzuojiantou arleft"></span> -->
          <router-link tag="span" class="iconfont icon-xiangzuojiantou arleft" to="/recommend"></router-link>
          <span class="titleName">歌单广场</span>
        </div>

        <div class="swiper mySwiper">
          <div class="swiper-wrapper nav">
            <!-- <span :class="{'swiper-slide':true, 'active':item==name}" @click="toggle" v-for="(item,index) in leftList" :key="index">{{item}}</span> -->
            <span @click="type='recom'" :class="{'swiper-slide':true,'active':type=='recom'}">推荐</span>
            <span @click="type='like'" :class="{'swiper-slide':true,'active':type=='like'}">猜你喜欢</span>
            <span @click="type='huayu'" :class="{'swiper-slide':true,'active':type=='huayu'}">华语</span>
            <span @click="type='eaa'" :class="{'swiper-slide':true,'active':type=='eaa'}">欧美</span>
            <span @click="type='popular'" :class="{'swiper-slide':true,'active':type=='popular'}">流行</span>
            <span @click="type='game'" :class="{'swiper-slide':true,'active':type=='game'}">游戏</span>
            <span @click="type='video'" :class="{'swiper-slide':true,'active':type=='video'}">视频</span>
          </div>
        </div>

        <recom @getslID="getslID" v-show="type=='recom'" :Personalizedr="Personalizedr"></recom>
        <like @getslID="getslID" v-show="type=='like'" :relists="relists"></like>
        <huayu @getslID="getslID" v-show="type=='huayu'" :huayuList="huayuList"></huayu>
        <eaa @getslID="getslID" v-show="type=='eaa'" :oumeiList="oumeiList"></eaa>
        <popular @getslID="getslID" v-show="type=='popular'" :popular="popular"></popular>
        <game @getslID="getslID" v-show="type=='game'" :eleMusic="eleMusic"></game>
        <videomv @getMVid="getMVid" v-show="type=='video'" :mvList="mvList"></videomv>
        
    </div>
  </div>
</template>

<script>
import {getPlaylistDetail,getRecommendResource,getRecommendSongs,getPersonalizedr,getTopPlaylist,getMvAll} from "../../api/recommend";// ,getPersonalizedr
import recom from "../../components/more/recom.vue";
import huayu from "../../components/more/huayu.vue";
import eaa from "../../components/more/EAA.vue";
import popular from "../../components/more/popular.vue";
import game from "../../components/more/game.vue";
import like from "../../components/more/like.vue"
import videomv from "../../components/more/videomv.vue"

import Swiper from 'swiper';

export default {
      data(){
        return{
          relists:[],
          Resongs:[],
          Personalizedr:[],
          playLists:[],// 歌单
          huayuList:[],// 华语
          oumeiList:[],// 欧美
          popular:[],// 流行
          eleMusic:[],// 电子
          romance:[],// 浪漫,夜晚
          mvList:[],// MV视频
          type:'recom',
          active:'',
          slID:null,// 获取歌单ID
          MVid:null,// 获取视频ID
        }
      },
      methods:{
        // 获取MVID
        getMVid(id){
          console.log(id)
          this.$router.push({name:"MV",params:{id:id}})
        },
        // 获取歌单ID
        getslID(id){
          console.log(id);
          getPlaylistDetail({id:id}).then(data=>{
            // console.log(data)
            this.$router.push({name:'songlists',params:data})
            // for(let i = 0 ; i<data.playlist.trackIds.length;i++){
              
            //   getPlaylistDetail({id:data.playlist.trackIds[i].id}).then(data=>{
            //     console.log(data)
            //   })
            // }
          })
        },
        // 猜你喜欢
        getRecommendResourceFun(){
          getRecommendResource().then(data=>{
              this.relists = data.recommend
              console.log(this.relists)
            })
          },
        // 每日推荐歌曲
        getRecommendSongsFun(){
          getRecommendSongs().then(data=>{
            this.Resongs = data.data.dailySongs;
            // console.log("每日推荐",data.data.dailySongs[0].id)
            // console.log(data);
            // console.log(this.resongs)
          })
        },
        // 推荐歌单
        getPersonalizedrFun(){
          getPersonalizedr({limit:''}).then(data=>{
            // console.log(data);
            this.Personalizedr = data.result;
          })
        },
        // 获取歌单
        getTopPlaylistFun(){
          getTopPlaylist().then(data=>{
            console.log("歌单",data.playlists)
            this.playLists = data.playlists;
            for(let i = 0 ; i < this.playLists.length;i++){
              // console.log("循环",this.playLists[i].tags)
              this.playLists[i].tags.forEach(item=>{
                // console.log(item)
                if(item == "华语"){
                  // console.log("华语",this.playLists[i])
                  this.huayuList.push(this.playLists[i])
                }else if(item == "欧美"){
                  this.oumeiList.push(this.playLists[i])
                }else if(item == "流行"){
                  this.popular.push(this.playLists[i])
                }else if(item == "游戏"||item =="电子"||item =="兴奋"){
                  this.eleMusic.push(this.playLists[i])
                }else if(item == "浪漫"||item == "夜晚"){
                  this.romance.push(this.playLists[i])
                }
              })
            }
            // console.log("华语",this.huayuList)
            // console.log("欧美",this.oumeiList)
            // console.log("流行",this.popular)
            // console.log("游戏",this.eleMusic)
            // console.log("浪漫",this.romance)
          })
        },
        // 获取MV视频
        getMvAllFun(){
          getMvAll().then(data=>{
            this.mvList = data.data
            console.log('MV',this.mvList)
          })
        },
      },
      created(){
        this.getRecommendResourceFun();
        // this.getRecommendSongsFun();
        this.getPersonalizedrFun();
        this.getTopPlaylistFun();
        this.getMvAllFun();
      },
      components:{
        eaa,
        recom,
        huayu,
        popular,
        game,
        like,
        videomv,
      },
      mounted(){
        new Swiper(".mySwiper", {
          slidesPerView: "auto",
          spaceBetween: 0,
          freeMode: true,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });
        // new Swiper('.swiperA', {
        //     pagination: '.swiper-pagination',
        //     slidesPerView: 'auto',  //显示个数
        //     paginationClickable: false,// 指示点点击
        //     observer:true,
        //     observeParents:false,
        //     freeMode: false, // 不自动贴合模式
        //     // spaceBetween: 30 //div之间间距
        // });
      },
      filters:{
        playCountData(value){
          let w = value > 10000? value / 10000 : value; // 万计算
          let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
          return y;
        }
      },
}
</script>

<style lang="less">
// body{
//   background-color: rgb(247, 247, 247);
// }
  .MoreBox{
    .back{
      line-height: 50px;
      font-weight: 700;
      background-color: #d44439;
      color: white;
      .arleft{
        padding: 0px 10px;
      }
    }
    div.mySwiper{
      text-align: center;
      overflow: hidden;
      background-color: #fff;
      div.swiper-wrapper.nav{
        span.swiper-slide{
          width: auto;
          height: 100%;
          padding: 10px 20px;
          font-size: 14px;
          background-color: #fff;
        }
        span.active.swiper-slide{
          font-weight: 700;
          // background-color: rgb(255, 214, 214);
        }
      }
    }
    div.swiperA{
      overflow: hidden;
      text-align: left;
      .resongsTitle {
        height: 60px;
        line-height: 60px;
        text-indent: 5px;
        font-size: 16px;
        color: #000;
        display: flex;
        justify-content: space-between;
        .rsTitle{
          font-weight: bold;
        }
        .more{
          font-size: 13px;
          color: #999;
          margin-right: 5px;
          .arright{
            font-size: 12px;
          }
        }
      }
      div.swiper-wrapper{
        div.swiper-slide{
          div.item{
            width: 96%;
            margin: 0px auto;
            padding: 10px 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
            .resongsImg{
              background-color: pink;
              width: 60px;
              height: 60px;
              border-radius: 4px;
              overflow: hidden;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .resongsText{
              flex: 4;
              padding-left: 10px;
              h4{
                width: 240px;
                font-weight: 700;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p{
                width: 240px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #999;
                overflow: hidden;
              }
            }
            .bofang{
              border-radius: 50%;
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              .bf{
                font-size: 16px;
                margin-left: 3px;
                color: #ccc;
              }
            }
          }
        }
      }
    }
    .remLists {
      .title {
        height: 60px;
        line-height: 60px;
        text-indent: 5px;
        font-size: 16px;
        color: #000;
        font-weight: bold;
        
      }
      .content {
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: left;
          padding-left: 1px;
          li {
            flex: 0 0 32%;
            position: relative;
            margin: 0px 2px;
            span {
              position: absolute;
              top: 0px;
              right: 0px;
              color: #fff;
              font-size: 10px;
              i {
                font-size: 15px;
                vertical-align: middle;
              }
            }
            .img {
              min-height: 50px;
              width: 100%;
              border-radius: 3px;
              img {
                width: 100%;
                border-radius: 3px;
              }
            }
            p {
              font-size: 12px;
              color: #565658;
              line-height: 15px;
              padding: 5px;
              margin-bottom: 10px;
              height: 26px;
              overflow: hidden;
            }
          }
        }
      }
      .resongs{
      .resongsTitle {
        height: 60px;
        line-height: 60px;
        text-indent: 5px;
        font-size: 16px;
        color: #000;
        display: flex;
        justify-content: space-between;
        .rsTitle{
          font-weight: bold;
        }
        .more{
          font-size: 13px;
          color: #999;
          margin-right: 5px;
          .arright{
            font-size: 12px;
          }
        }
      }
      ul{
        list-style: none;
        li{
          width: 96%;
          margin: 0px auto;
          padding: 10px 0px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #ccc;
          .resongsImg{
            background-color: pink;
            width: 60px;
            height: 60px;
            border-radius: 4px;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .resongsText{
            flex: 4;
            padding-left: 10px;
            h4{
              width: 240px;
              font-weight: 700;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            p{
              width: 240px;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #999;
              overflow: hidden;
            }
          }
          .bofang{
            border-radius: 50%;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            .bf{
              font-size: 16px;
              margin-left: 3px;
              color: #ccc;
            }
          }
        }
      }
    }
    }
}
</style>
